Pinia与Vuex的对比：Pinia是Vuex的良好替代品吗？

前端小工
8,654 阅读8分钟

简介

Pinia是Vue.js的一个轻量级状态管理库，最近获得了广泛的关注。它使用Vue 3中新的反应性系统来构建一个直观的、完全类型化的状态管理库。

Pinia的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）。

另一方面，Vuex也是一个为Vue框架建立的流行的状态管理库，它是Vue核心团队推荐的状态管理库。Vuex高度关注应用的可扩展性、开发者的工效和信心。它基于与Redux相同的流量架构。

在这篇文章中，我们将对Pinia和Vuex进行比较。我们将分析这两个框架的设置、社区优势和性能。我们还将看一下Vuex 5与Pinea 2相比的新变化。

本文中使用的代码片段是基于Vue 3 Composition API的。

设置

Pinia的设置

使用Pinia很容易上手，因为它只需要安装和创建一个商店。

要安装Pinia，你可以在终端运行以下命令。

yarn add pinia@next
# or with npm
npm install pinia@next

这个版本与Vue 3兼容。如果你正在寻找与Vue 2.x兼容的版本，请查看 v1 分支。

Pinia是一个围绕Vue 3 Composition API的封装器。因此，你不必把它作为一个插件来初始化，除非你需要Vue devtools支持、SSR支持和webpack代码拆分等情况。

//app.js
import { createPinia } from 'pinia'
app.use(createPinia())

在上面的片段中，你将Pinia添加到Vue.js项目中，这样你就可以在你的代码中使用Pinia的全局对象。

为了创建一个商店，你用一个包含创建一个基本商店所需的状态、动作和获取器的对象来调用defineStore 方法。

// stores/todo.js
import { defineStore } from 'pinia'

export const useTodoStore = defineStore({
  id: 'todo',
  state: () => ({ count: 0, title: "Cook noodles", done:false })
})

Vuex设置

Vuex也很容易设置，需要安装和创建一个商店。

要安装Vuex，你可以在终端运行以下命令。

npm install vuex@next --save
# or with yarn
yarn add vuex@next --save

要创建一个商店，你用一个包含创建基本商店所需的状态、动作和获取器的对象来调用createStore 方法。

//store.js
import {createStore} from 'vuex'
const useStore = createStore({
  state: {
    todos: [
      { id: 1, title: '...', done: true }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

要访问Vuex全局对象，你需要将Vuex添加到根Vue.js项目文件中，如下所示。

//index.js
import { createApp } from 'vue'
import App from './App.vue'
import {useStore} from './store'
createApp(App).use(store).mount('#app')

使用方法

Vuex和Pinia访问其存储的方式略有不同。

Pinia的用法

使用Pinia，可以按如下方式访问商店。

export default defineComponent({
  setup() {
    const todo = useTodoStore()

    return {
      // gives access only to specific state
      state: computed(() => todo.title),
    }
  },
})

注意，在访问商店的属性时，商店的状态对象被省略了。

Vuex的用法

使用Vuex，商店可以被访问如下。

import { computed } from 'vue'
export default {
  setup () {
    const store = useStore()

    return {
      // access a state in computed function
      count: computed(() => store.state.count),

      // access a getter in computed function
      double: computed(() => store.getters.double)
    }
  }
}

社区和生态系统的力量

在写这篇文章的时候，Pinia的社区很小，这导致Stack Overflow上的贡献很少，解决方案也较少。

由于Pinia从去年年初开始受到欢迎，以及到目前为止的进展，其社区正在快速增长。希望Pinia上很快会有更多的贡献者和解决方案。

Vuex是Vue.js核心团队推荐的状态管理库，它有一个庞大的社区，核心团队成员做出了重大贡献。Vuex错误的解决方案在Stack Overflow上随处可见。

学习曲线和文档

这两个状态管理库都相当容易学习，因为它们在YouTube和第三方博客上有很棒的文档和学习资源。对于有Redux、MobX、Recoil等Flux架构库工作经验的开发者来说，他们的学习曲线更容易。

这两个库的文档都很好，写的方式对有经验的和新的开发者都很友好。

GitHub评分

在写这篇文章的时候，Pinea有两个主要版本：v1和v2，其中v2在GitHub上有超过1.6k颗星。鉴于它最初是在2019年发布的，而且相对较新，它可以说是Vue.js生态系统中发展最快的状态管理库之一。

Pinia GitHub Stars

同时，从Vuex的创建日期到现在，Vuex库已经发布了五个稳定版本。虽然v5处于实验阶段，但Vuex的v4是迄今为止最稳定的版本，在GitHub上有大约26.3k颗星。

Vuex GitHub Stars

性能

Pinia和Vuex的速度都非常快，在某些情况下，使用Pinia时，你的网络应用会比Vuex快。这种性能提升可以归功于Pinea的极轻重量。Pinia的重量约为1KB。

尽管Pinea是在Vue devtools的支持下建立的，但由于Vue devtools没有公开必要的API，所以一些功能如时间旅行和编辑仍然不被支持。当开发速度和调试对你的项目来说更重要时，这是值得注意的。

Pinia 2与Vuex 4的比较

Pinia与Vuex 3和4进行了这些比较。

  • 突变不再存在。他们经常被认为是非常啰嗦的。他们最初带来了devtools的集成，但这不再是一个问题了。

  • 不需要创建自定义的复杂包装器来支持TypeScript，所有的东西都是类型化的，API的设计方式是尽可能地利用TS类型推理。

这些都是Pinea在其状态管理库和Vuex的比较中的额外见解。

  • Pinia不支持嵌套存储。相反，它允许你在需要时创建存储。然而，存储仍然可以通过导入和使用另一个存储来隐式嵌套。

  • 存储器在被定义时被自动命名。因此，不需要对模块进行明确的命名。

  • Pinia允许你建立多个存储，并让你的捆绑器代码自动分割它们。

  • Pinia允许获取器被用于其他获取器中

  • Pinia允许在devtools的时间轴上使用$patch ：

    this.$patch((state) => {
    state.posts.push(post)
    state.user.postsCount++
  })
  .catch(error){
    this.errors.push(error)
  }

    ，对变化进行分组。

将Pinea 2（目前处于alpha阶段）与Vuex相比较，我们可以推断出Pinea是领先于Vuex 4的。

Vue.js核心团队为Vuex 5制定了一个公开的RFC，类似于Pinea使用的RFC。目前，Vuex通过RFC来尽可能多地收集社区的反馈。希望Vuex 5的稳定版能超过Pinea 2。

据Pinea的创造者（Eduardo San Martin Morote）说，他也是Vue.js核心团队的一员，并积极参与Vuex的设计，Pinea和Vuex的相似之处多于差异。

Pinia试图尽可能地接近Vuex的理念。它的设计是为了测试Vuex的下一次迭代的建议，它是成功的，因为我们目前有一个开放的RFC，用于Vuex 5，其API与Pinea使用的非常相似。我对这个项目的个人意图是重新设计使用全局商店的体验，同时保持Vue的平易近人的理念。我保持Pinea的API与Vuex一样接近，因为它不断向前发展，使人们很容易迁移到Vuex，甚至在未来融合两个项目（在Vuex下）。

尽管Pinea足以取代Vuex，但取代Vuex并不是它的目标，因此Vuex仍然是Vue.js应用程序的推荐状态管理库。

Vuex和Pinia的优点和缺点

Vuex优点

  • 支持调试功能，如时间旅行和编辑
  • 适用于大规模和高复杂性的Vue.js项目

Vuex缺点

  • 从Vue 3开始，getter的结果不会像计算属性那样被缓存起来
  • Vuex 4有一些与类型安全相关的问题

Pinia 优点

  • 完全支持TypeScript：与在Vuex中添加TypeScript相比，添加TypeScript非常容易
  • 极其轻量级（重约1KB）。
  • 商店的动作被派发为普通的函数调用，而不是使用dispatch 方法或MapAction 辅助函数，这在Vuex中是常见的。
  • 支持多个商店
  • 支持Vue开发工具、SSR和webpack代码拆分

Pinia的缺点

  • 不支持时间旅行和编辑等调试功能

何时使用Pinia，何时使用Vuex

根据我的个人经验，由于Pinea的重量很轻，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能如时间旅行和编辑仍然不被支持。

将Vuex用于中小规模的Vue.js项目是矫枉过正的，因为它的重量对性能的降低有很大贡献。因此，Vuex适用于大规模和高复杂度的Vue.js项目。

总结

在这篇文章中，我们对Vuex和Pinea进行了比较，并强调了它们的最佳功能、文档、社区力量、学习曲线，以及在写作时发现的一些陷阱。

Vuex 4和Pinea在大多数方面都很相似，它们可以用来完成同样的任务。

总的来说，一个并不比另一个好--它们都能实现预期的目标。这完全取决于你的用例和偏好。

另外，请记住，Pinia的创造者已经说过，Pinia的目的不是要取代Vuex。相反，它的目的是让开发者更容易迁移到Vuex，甚至在未来将两个项目（在Vuex下）融合。

The postPinia vs. Vuex: Is Pinia a good replacement for Vuex?appeared first onLogRocket Blog.

avatar
文章
阅读
粉丝